<template>
	<view>
		<view class="alldiv">
			<view class="headdiv">
				<web-view style="background-color: #fafafa;" class="webview" ref="webview" :fullscreen="false"
					@onPostMessage="getMessage" src="/hybrid/html/maps/theEnd.html"></web-view>
				<cover-image class="back" @click="returns" src="@/static/image/arrow-left.png"></cover-image>
			</view>

			<view class="bodydiv">
				<!-- 订单信息 -->
				<view class="order-info">
					<view class="title">
						{{ language.Takingataxi.theEnd }}
					</view>
					<view class="cost-box">
						<text>{{ language.Takingataxi.travelCost }}</text>
						<view class="cost">
							<text>{{ orderInfo.cost }}</text>{{ language.Takingataxi.currencyText }}
						</view>
					</view>
				</view>

				<!-- 司机信息 -->
				<view class="driver-info">
					<view class="profile-photo mr10">
						<u-avatar :src="driverInfo.headPortrait"></u-avatar>
					</view>
					<view class="driver-name mr10">{{ driverInfo.name }}师傅</view>
					<view class="license-plate mr10">{{ driverInfo.licensePlateNum }}</view>
					<view class="taxi-type">快车</view>
				</view>

				<!-- 按钮组 -->
				<view class="btn-list">
					<u-button @click="oneMoreOrder" class="btn-item">{{ language.Takingataxi.oneMoreOrder }}</u-button>
					<u-button @click="callReturn" class="btn-item">{{ language.Takingataxi.callReturn }}</u-button>
					<u-button @click="payment" class="btn-item">{{ language.Takingataxi.immediatePayment }}</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as driverApi from '@/api/driver.js'
	import GoogleMap from "@/mixins/GoogleMap";
	export default {
		mixins: [GoogleMap],
		data() {
			return {
				language: {},
				latitude: 39.909,
				longitude: 116.39742,
				wv: null,
				intervalId: 0,
				otherUseList: [{
						id: 0,
						icon: require('@/static/image/seek-help.png'),
						name: '紧急求助',
					},
					{
						id: 1,
						icon: require('@/static/image/path.png'),
						name: '路线选择',
					},
					{
						id: 2,
						icon: require('@/static/image/share.png'),
						name: '行程分享',
					},
					{
						id: 3,
						icon: require('@/static/image/cancel.png'),
						name: '取消订单',
					}
				],
				driverInfo: {},
				orderInfo: {},
				orderId: '',
				driverId: '',
			}
		},
		onShow: function() {
			this.setHeight()
			this.getlanguagedata();
		},
		onLoad(option) {
			if (!option.id) {
				this.navigateBack()
			}
			this.orderId = option.id
			this.driverId = option.driverId
			this.getDriverInfo(this.driverId)
			// this.intervalId = setInterval(this.getOrderInfo, 5000)
			setTimeout(() => {
				this.getOrderInfo()
			}, 1500)
		},
		beforeDestroy() {
			// wssocket.close();
			this.intervalId && clearInterval(this.intervalId)
		},
		mounted() {
			this.setHeight()
		},
		methods: {
			getMessage(res) {
				const data = (res.detail.data && res.detail.data[0]) || {};
				switch (data.action) {
					case 'initPosition':
						break;
				}
			},
			// 设置高度
			setHeight() {
				// 设置 iframe 高度和发送消息
				// #ifdef APP-PLUS
				let currentWebview = this.$scope.$getAppWebview();
				let boxHeight = 0
				uni.getSystemInfo({
					success: res => boxHeight = res.windowHeight // 屏幕可用高度
				})
				setTimeout(() => {
					this.wv = currentWebview.children()[0];
					this.wv.setStyle({
						top: 0,
						height: 449,
						background: 'transparent',
						zindex: 1
					})
				}, 1000)
				// #endif
			},
			async getDriverInfo() {
				const res = await driverApi.getDriverInfo({
					id: this.driverId
				})
				if (res.code === 0) {
					this.driverInfo = res.data
				}
			},
			async getOrderInfo() {
				try {
					const res = await driverApi.getTaxiOrder({
						id: this.orderId
					});
					if (res.code === 0) {
						this.orderInfo = res.data;
						const startLatLng = {
							latitude: parseFloat(this.orderInfo.startLatitude),
							longitude: parseFloat(this.orderInfo.startLongitude)
						};
						const endLatLng = {
							latitude: parseFloat(this.orderInfo.endLatitude),
							longitude: parseFloat(this.orderInfo.endLongitude)
						};
						this.wv?.evalJS(
							`initMap2(${JSON.stringify(startLatLng)}, ${JSON.stringify(endLatLng)})`
						);
					} else {
						console.log('getTaxiOrder failed:', res);
					}
					uni.hideLoading();
				} catch (e) {
					console.log(e);
				}
			},
			getlanguagedata() {
				this.language =
					this.$store.getters["internationalization/getinternationalization"];
			},
			returns() {
				uni.switchTab({
					url: "/pages/Home/Home",
				});
			},
			oneMoreOrder() {
				uni.navigateTo({
					url: "/pages/Home/Takingataxi/index",
				});
			},
			callReturn() {
				const startPointObj = {
					address: this.orderInfo.endPlace,
					latitude: this.orderInfo.endLatitude,
					longitude: this.orderInfo.endLongitude
				}
				const endLocation = {
					address: this.orderInfo.startPlace,
					latitude: this.orderInfo.startLatitude,
					longitude: this.orderInfo.startLongitude
				}
				// uni.navigateTo({
				// 	url: `/pages/Home/Takingataxi/TakingataxiNow?startLocation=${encodeURIComponent(JSON.stringify(startPointObj))}&endLocation=${encodeURIComponent(JSON.stringify(endLocation))}`
				// });
			},
			async payment() {
				try {
					uni.showLoading({
						title: 'loading...'
					});
					const res = await driverApi.payment({
						orderId: this.orderId
					})
					if (res.code === 0) {
						uni.navigateTo({
							url: "/pages/Home/Takingataxi/feeDetails?id=" + this.orderId,
						});
					}
					uni.hideLoading();
				} catch (e) {
					uni.hideLoading();
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.alldiv {
		width: 100%;
		height: 100vh;

		.headdiv {
			position: relative;
			width: 100%;
			height: 898rpx;
			overflow: hidden;

			.back {
				position: absolute;
				left: -40rpx;
				top: 100rpx;
				width: 160rpx;
				height: 120rpx;
				transform: scale(0.5);
				z-index: 9999;
			}
		}

		.bodydiv {
			padding: 48rpx 32rpx;
			width: 100%;
			height: calc(100vh - 898rpx);
			border-radius: 20px 20px 0 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
			overflow-y: auto;

			// 订单信息
			.order-info {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 44rpx;
					color: rgba(56, 56, 56, 1);
				}

				.cost-box {
					margin-top: 12rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						font-size: 24rpx;
						line-height: 32rpx;
						color: rgba(153, 153, 153, 1);
					}

					.cost {
						font-size: 28rpx;
						line-height: 40rpx;
						color: rgba(56, 56, 56, 1);

						text {
							font-size: 48rpx;
							font-weight: bold;
							line-height: 48rpx;
							color: rgba(47, 212, 184, 1);
						}
					}
				}
			}

			// 司机信息
			.driver-info {
				position: relative;
				margin-top: 24rpx;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				color: #333;
				font-weight: bold;
				font-size: 28rpx;
				line-height: 40rpx;

				.profile-photo {
					width: 80rpx;
					height: 80rpx;
				}

				.taxi-type {
					width: 56rpx;
					height: 28rpx;
					text-align: center;
					line-height: 28rpx;
					border-radius: 2px;
					background: linear-gradient(135deg, rgb(255, 141, 26) 0%, rgb(255, 82, 82) 100%);
					color: #fff;
					font-size: 20rpx;
				}

			}

			.mr10 {
				margin-right: 20rpx;
			}

			.btn-list {
				padding-top: 14rpx;
				display: flex;
				justify-content: space-between;

				.btn-item {
					width: 214rpx;
					height: 44rpx;
					font-size: 20rpx;
					border-radius: 30rpx;
					border: 1rpx solid rgb(47, 212, 184);
					color: rgba(47, 212, 184, 1);

					&:last-child {
						background: rgb(47, 212, 184);
						color: #fff;
					}
				}
			}

		}
	}
</style>